<template>
  <div id="home">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="container">
        <div class="header_big">
          <div class="header_left">
            <!-- 暂时百分比处理 后期rem -->
            <div class="tixing header_left_tixing" style="width:100%;height:0.5rem;">
              <div class="weather flex_b">
                <span>{{weatherCity}}</span>
                <span style="font-size:0.3rem">{{temperature}}&#176;</span>
                <span>{{weather}}</span>
                <span>{{winddirection}}{{windpower}}</span>
                <span>{{humidity}}</span>
              </div>
            </div>
          </div>
          <div class="header_center">
            <div class="header_center_text dtixing">
              <span>历下区社会治理网格化智能工作平台</span>
            </div>
          </div>
          <div class="header_right">
            <!-- 暂时百分比处理 后期rem -->
            <div class="tixing header_right_tixing">
              <div class="weather flex">
                <span style="padding-left:0.42rem;">{{nowDate}}</span>
                <span>{{nowWeek}}</span>
                <span style="font-size:0.3rem">{{nowTime}}</span>
                <div class="flex_c">
                  <span>退出</span>
                  <img src="../assets/tuichu.png" alt="" style="width:.3rem;height:.3rem;">
                </div>
                <div class="flex_c">
                  <span>分平台</span>
                  <img
                    src="../assets/sj.png"
                    alt=""
                    style="width:.2rem;height:.2rem;margin-left:0.05rem;"
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main">
          <div class="main_left">
            <dv-border-box-1 style="   position: relative; box-sizing: border-box;width:7.4rem;height:2.4rem;">
            <div class="jianjie ">
                <div class="jianjie_title  flex_c">
                  <img src="../assets/jianjie.png" alt="" style="width:0.25rem;height:0.25rem;">
                  <span style="padding-left:0.12rem;">历下区简介</span>
                </div>
                <div class="jianjie_txet">
                  <div class="">
                    <div class="jianjie_title_">历下区是山东省会济南的中心城区,位于济南市区的东南部,是济南的政治、经济、文化和
                      <br>旅游中心
                    </div>
                    <p>辖区面积：100.89平方公里,常住人口:75万,流动人口:75万,辖13个街道,114个社区,20个村</p>
                    <img src="../assets/11.png" alt="" class="quancheng_logo">
                  </div>
                </div></div>
              </dv-border-box-1>
            
            <div class="gridding_power">
              <div class="gridding_power_left">
                <dv-border-box-1 :reverse="true" style="height:2.8rem;width:100%;">
                  <gridding_power></gridding_power>
                </dv-border-box-1>
              </div>
              <div class="gridding_power_right">
                <dv-border-box-1 style="height:2.7rem;width:99%;">
                  <parth-buding></parth-buding>
                </dv-border-box-1>
              </div>
            </div>
            <div class="main_left_bar">
              <main-left-bar></main-left-bar>
            </div>
            <div class="main_left_gird_number">
              <dv-border-box-1 :reverse="true" style="height:4.4rem;width:100%;">
                <gird-number></gird-number>
              </dv-border-box-1>
            </div>
          </div>
          <div class="main_center">
            <div class="map_content">
              <map_center></map_center>
            </div>
          </div>
          <div class="main_right">
            <dv-border-box-1 style="width:100%;height:7.55rem;">
              <event-total></event-total>
            </dv-border-box-1>
            <div class="main_right_bottom">
              <dv-border-box-1 style="height:5rem;width:100%;">
                <div class="flex">
                  <service-personnel></service-personnel>
                  <management-personnel></management-personnel>
                </div>
              </dv-border-box-1>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { weatther } from '@/api/index';
import gridding_power from './gird';
import parthBuding from './partyBuding';
import mainLeftBar from './mainLeftBar';
import girdNumber from './girdNumber';
import map_center from './mapCenter';
import eventTotal from './eventTotal';
import servicePersonnel from './servicePersonnel';
import managementPersonnel from './managementPersonnel';
export default {
  data() {
    return {
      weatherCity: '济南',
      temperature: '30',
      weather: '多云',
      winddirection: '南风',
      windpower: '<3级',
      humidity: '空气湿度:66',
      loading: true,
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '', // 当前星期
    };
  },
  mounted() {
    this.cancelLoading();
    this.currentTime();
    this.weatther();
  },
  components: {
    gridding_power,
    parthBuding,
    mainLeftBar,
    girdNumber,
    map_center,
    eventTotal,
    servicePersonnel,
    managementPersonnel,
  },
  beforeDestroy: function() {
    if (this.getDate) {
      console.log('销毁定时器');
      clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
    }
    if (this.cancelLoading) {
      console.log('销毁定时器');
      clearInterval(this.cancelLoading); // 在Vue实例销毁前，清除时间定时器
    }
  },
  methods: {
    weatther() {
      weatther().then(res => {
        let data = res.data.lives[0];
        this.weatherCity = data.city;
        this.temperature = data.temperature;
        this.weather = data.weather;
        this.humidity = '空气湿度' + data.humidity;
        this.winddirection = data.winddirection + '风';
        this.windpower = data.windpower + '级';
      });
    },
    currentTime() {
      setInterval(this.getDate, 1000);
    },
    getDate: function() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let week = new Date().getDay();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      if (week == 1) {
        this.nowWeek = '星期一';
      } else if (week == 2) {
        this.nowWeek = '星期二';
      } else if (week == 3) {
        this.nowWeek = '星期三';
      } else if (week == 4) {
        this.nowWeek = '星期四';
      } else if (week == 5) {
        this.nowWeek = '星期五';
      } else if (week == 6) {
        this.nowWeek = '星期六';
      } else {
        this.nowWeek = '星期日';
      }
      _this.nowTime = hh + ':' + mf + ':' + ss;
      _this.nowDate = yy + '/' + mm + '/' + dd;
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss">
.bg {
  //   padding: 0.2rem 0.2rem 0 0.2rem;
  padding: 0.1rem 0.2rem 0 0.2rem;
  background-image: url('../assets/pageBg.jpg');
  background-size: cover;
  background-position: center center;
}
#home {
  width: 100%;
  height: 100vh;
}
.container {
  widows: 100%;
  .header_big {
    .header_left {
      margin: 0.052rem 0 0 0.052rem;
      width: 32%;
      display: inline-block;
      .header_left_tixing {
        .weather {
          width: 70%;
          transform: none;
          margin-left: 1rem;
          line-height: 0.5rem;
          span {
            font-size: 0.19rem;
            color: #fff;
          }
        }
      }
    }
    .header_center {
      display: inline-block;
      width: 35%;
      vertical-align: top;
      .header_center_text {
        width: 100%;
        color: #fff;
        font-size: 0.35rem;
        height: 0.78rem;
        line-height: 0.6rem;
        text-align: center;
      }
    }
    .header_right {
      display: inline-block;
      width: 32%;
      .header_right_tixing {
        .weather {
          span {
            padding-left: 0.32rem;
            cursor: pointer;
            font-size: 0.19rem;
          }
        }
        width: 100%;
        height: 0.5rem;
        line-height: 0.5rem;
        span {
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .main {
    margin-top: 0.08rem;
    width: 100%;
    .main_left {
      width: 32%;
      height: 4rem;
      display: inline-block;
      vertical-align: top;
      .jianjie {
        height: 2rem;
        width: 97%;
border-radius:5%;
          
        .jianjie_title_ {
          text-indent: 0.23rem;
          color: #fff;
          font-size: 0.17rem;
          padding-left: 0.23rem;
          margin-top: 0.2rem;
          line-height: 0.26rem;
          
        }
        .jianjie_txet {
          .quancheng_logo {
            position: absolute;
            height: 1.4rem;
            right: 0.2rem;
            bottom: 0.2rem;
          }
          p {
            color: #6cf1f4;
            font-size: 0.17rem;
            padding-left: 0.23rem;
            line-height: 0.28rem;
          }
        }
        .jianjie_title {
          text-align: center;
          justify-content: center;
          margin-left: 0.1rem;
          width: 97%;
          border: none;
          height: 0.34rem;
          line-height: 0.4rem;
          color: #fff;
          font-size: 0.25rem;
        }
      }

      .gridding_power {
        width: 100%;
        height: 2.77rem;
        display: flex;
        background: #03113d;
        .gridding_power_left {
          width: 45%;
          height: 2.7rem;
        }
        .gridding_power_right {
          width: 55%;
          height: 2.7rem;
          margin-left: 0.15rem;
        }
      }
      .main_left_bar {
        width: 100%;
        height: 2.97rem;

        background: #02083c;
      }
      .main_left_gird_number {
        width: 100%;
        background: #02083c;
      }
    }
    .main_center {
      width: 36%;
      height: 7.88rem;
      display: inline-block;
      vertical-align: top;

      .map_content {
        width: 100%;
        margin: auto;
        height: 10.89rem;
      }
    }
    .main_right {
      width: 32%;
      background: #030344;
      height: 15rem;
      display: inline-block;
      .main_right_bottom {
        width: 100%;
        height: 4rem;
      }
    }
  }
}
</style>

